import React from 'react';
import { NavBar, Toast, Form, Input, Button, Radio, ImageUploader } from 'antd-mobile';
import { useNavigate } from 'react-router-dom';
import cookie from 'react-cookies';
import { mockUpload } from './utils';

const Profile = () => {
    let navigate = useNavigate()
    const LoginUser = cookie.load('LoginUser') ? cookie.load('LoginUser') : ''
    console.log(LoginUser)
    const maxCount = 2
    const [avatarUrl, setavatarUrl] = React.useState([
        {
            url: LoginUser.avatar,
        },
    ])

    const Profiles = async (value) => {
        let data = {
            id: LoginUser.id,
            nickname: value.nickname ? value.nickname : LoginUser.nickname,
            email: LoginUser.email,
            sex: value.sex ? value.sex : LoginUser.sex,
        }

        if (value.password) {
            data.password = value.password
        }

        if (value.avatar) {
            data.avatar = avatarUrl[0].file
        }

        let result = await React.$api.profile(data)
        cookie.save('LoginUser', result.data)
        if (result.code == '1') {

            Toast.show({
                icon: 'success',
                content: result.msg,
            })
            navigate('/user/base/index')
        } else {
            Toast.show({
                icon: 'fail',
                content: result.msg,
            })

            return false
        }
    }

    return (
        <>
            <NavBar onBack={() => { navigate(-1) }}>基本资料</NavBar>
            {/* <!-- 用户信息 --> */}
            <div className="user">
                <div className="avatar wow fadeInUp">
                    <img src={LoginUser.avatar} />
                </div>
            </div>

            <Form onFinish={Profiles} layout='horizontal' className="profile wow fadeInUp" data-wow-delay="200ms">

                <Form.Item
                    name='nickname'
                    label='昵称'
                >
                    <Input placeholder='请输入昵称' defaultValue={LoginUser.nickname} value={LoginUser.nickname} />
                </Form.Item>

                <Form.Item
                    name='email'
                    label='邮箱'
                >
                    <Input placeholder='请输入邮箱' readOnly defaultValue={LoginUser.email} />
                </Form.Item>

                <Form.Item
                    label='密码'
                    name='password'
                >
                    <Input type='password' placeholder='请输入密码' />
                </Form.Item>

                <Form.Item
                    label='性别'
                    name='sex'
                >
                    <Radio.Group defaultValue={LoginUser.sex}>
                        <Radio value='0'>保密</Radio>
                        <Radio value='1'>男</Radio>
                        <Radio value='2'>女</Radio>
                    </Radio.Group>
                </Form.Item>

                <Form.Item
                    label='头像'
                    name='avatar'
                >
                    <ImageUploader
                        defaultValue={avatarUrl}
                        value={setavatarUrl}
                        onChange={setavatarUrl}
                        upload={mockUpload}
                        maxCount="1"
                        showUpload={setavatarUrl.length < maxCount}
                    />

                </Form.Item>

                <div className="action">
                    <Button block type='submit' color='primary' size='large'>
                        提交
                    </Button>
                </div>
            </Form>

        </>
    )
}

export default Profile;